<template>
  <div class="tool-menus">
    <div class="title">控件库</div>
    <div class="tool-list">
      <el-scrollbar>
        <el-divider content-position="left">基础组件</el-divider>
        <div
          v-for="tool in baseTools"
          :key="tool.typeId"
          class="tool-item"
          :data-type-id="tool.typeId"
          :data-type-name="tool.typeName"
          :data-type-icon="tool.typeIcon"
          draggable="true"
          @dragstart="onDragStart"
          @dragend="onDragEnd"
        >
          <i class="icon iconfont" v-html="tool.typeIcon"></i> {{ tool.typeName }}
        </div>
        <el-divider content-position="left">文本组件</el-divider>
        <div
          v-for="tool in textTools"
          :key="tool.typeId"
          class="tool-item"
          :data-type-id="tool.typeId"
          :data-type-name="tool.typeName"
          :data-type-icon="tool.typeIcon"
          draggable="true"
          @dragstart="onDragStart"
          @dragend="onDragEnd"
        >
          <i class="icon iconfont" v-html="tool.typeIcon"></i> {{ tool.typeName }}
        </div>
        <el-divider content-position="left">复杂组件</el-divider>
        <div
          v-for="tool in tools"
          :key="tool.typeId"
          class="tool-item"
          :data-type-id="tool.typeId"
          :data-type-name="tool.typeName"
          :data-type-icon="tool.typeIcon"
          draggable="true"
          @dragstart="onDragStart"
          @dragend="onDragEnd"
        >
          <i class="icon iconfont" v-html="tool.typeIcon"></i> {{ tool.typeName }}
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Tools } from '../types'
// 表单工具列表
const baseTools = ref<Tools>([
  {
    typeId: 'TextInput',
    typeName: '单行输入框',
    typeIcon: '&#xe646;'
  },
  {
    typeId: 'TextAreaInput',
    typeName: '多行输入框',
    typeIcon: '&#xe645;'
  },
  {
    typeId: 'NumberInput',
    typeName: '数字输入框',
    typeIcon: '&#xe660;'
  },
  {
    typeId: 'SingleSelect',
    typeName: '单选框',
    typeIcon: '&#xe71f;'
  },
  {
    typeId: 'MultipleSelect',
    typeName: '多选框',
    typeIcon: '&#xe7f9;'
  },
  {
    typeId: 'DateSelect',
    typeName: '日期',
    typeIcon: '&#xe62a;'
  },
  {
    typeId: 'DateRangeSelect',
    typeName: '日期区间',
    typeIcon: '&#xe671;'
  },
  {
    typeId: 'ImageUpload',
    typeName: '图片',
    typeIcon: '&#xe8ba;'
  },
  {
    typeId: 'FileUpload',
    typeName: '附件',
    typeIcon: '&#xe6a9;'
  },
  {
    typeId: 'UserSelect',
    typeName: '人员选择器',
    typeIcon: '&#xe66a;'
  }
])
const textTools = ref<Tools>([
  {
    typeId: 'RemarkText',
    typeName: '备注',
    typeIcon: '&#xe60a;'
  },
  {
    typeId: 'LinkText',
    typeName: '链接数据',
    typeIcon: '&#xe601;'
  },
  {
    typeId: 'Initiator',
    typeName: '${发起人}',
    typeIcon: '&#xe65d;'
  },
  {
    typeId: 'InitiatorDept',
    typeName: '${发起部门}',
    typeIcon: '&#xe65d;'
  },
  {
    typeId: 'InitiatorTime',
    typeName: '${发起时间}',
    typeIcon: '&#xe65d;'
  }
])
const tools = ref<Tools>([
  {
    typeId: 'InnerTable',
    typeName: '表格数据',
    typeIcon: '&#xe63e;'
  },
  {
    typeId: 'CountData',
    typeName: '计算数据',
    typeIcon: '&#xe660;'
  },
  {
    typeId: 'FormatData',
    typeName: '数据匹配',
    typeIcon: '&#xe6e0;'
  },
  {
    typeId: 'ServerData',
    typeName: '云数据',
    typeIcon: '&#xe635;'
  }
])
// 拖拽开始
const onDragStart = (e: DragEvent) => {
  const target = e.target as HTMLElement
  const type = target?.getAttribute('data-type-id') || ''
  const name = target?.getAttribute('data-type-name') || ''
  const icon = target?.getAttribute('data-type-icon') || ''
  if (e.dataTransfer) {
    e.dataTransfer.dropEffect = 'link'
    // 设置拖拽数据
    e.dataTransfer.setData('type', type)
    e.dataTransfer.setData('type-name', name)
    e.dataTransfer.setData('type-icon', icon)
  }
}
// 拖拽结束
const onDragEnd = (e: DragEvent) => {
  e.preventDefault()
}
</script>

<script lang="ts">
export default {
  name: 'ToolMenus'
}
</script>
